<template>
  <div>
    <el-row class="bg">
      <el-col :span="8" class="logo"> </el-col>
      <el-col :span="8" class="glob-title"><span>后台管理系统</span></el-col>
      <el-col :span="8" style="padding: 10px 0 0 0; font-size: 14px; color: white">
        您好,{{ user.name }} <img :src="user.avatarUrl" style="width: 35px; height: 35px" /> <el-button type="text" size="mini" @click="doLogOut()" style="color: white; margin-left: 8px">注消</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  props: ["user"],
  methods: {
    doLogOut() { Vue.ls.clear(); this.$emit("changeLogin", false); },
  },
};
</script>
<style scoped lang="scss">
.glob-title { font-size: 40px; }
.logo { background-image: url("../assets/logo.png"); background-repeat: no-repeat; height: 60px; padding: 0; margin: 0; }
.bg { background-image: url("../assets/bg.png"); text-align: center; height: 60px; padding: 0; margin: 0; }
</style>
